<template>
  <div class="pagebox app-container aCnopadding">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="7">
        <!--      设备运行参数-->
        <div class="gutter-box">
          <div class="bg padding-lr padding-tb scorllh">
            <div>
              <div class="colorin indextitle">设备运行参数</div>
              <div>
                <div class="border-b padding-tb">
                  <a-row class="padding-tb-10">
                    <a-col :span="10">
                      <div class="runParameterTitle">{{ equData.macname }}</div>
                    </a-col>
                    <a-col :span="14">
                      <div class="Sequence-oneRighttype" :style="{ color: runStateOptioncolor(equData.runstate, 1) }">
                        <span>
                          <a-icon
                            class="icon"
                            :type="runStateOptioncolor(equData.runstate, 2)"
                            theme="filled"
                            :style="{ color: runStateOptioncolor(equData.runstate, 1) }"
                          />
                        </span>
                        {{ runStateOptioncolor(equData.runstate, 3) }}
                      </div>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="10">
                      <img
                        style="width: 100%; height: 230px"
                        :src="equData.url ? imgurl + equData.url : defultimg"
                        alt=""
                        :onerror="onerrorimg"
                      />
                    </a-col>
                    <a-col :span="14">
                      <div class="leftParamete padding-lr">
                        <p>
                          <span>设备编号：</span>
                          <span class="colorin">{{ equData.macnum || '' }}</span>
                        </p>
                        <p>
                          <span>设备型号：</span>
                          <span class="colorin">{{ equData.mactype || '' }}</span>
                        </p>

                        <p>
                          <span>设备类型：</span>
                          <span class="colorin">{{ equData.macname || '' }}</span>
                        </p>

                        <p>
                          <span>近日加工：</span>
                          <span class="colorin">{{ equData.count || 0 }}件</span>
                        </p>

                        <p>
                          <span>主轴负载：</span>
                          <a-progress
                            :percent="equData.spdlLoad ? spdlLoad : 0"
                            strokeColor="#FBC328"
                            style="width: 60%"
                          />
                        </p>
                        <p>
                          <span>x轴振动：</span>
                          <span class="colorin">{{ equData.xVibration }}</span>
                        </p>
                        <p>
                          <span>y轴振动：</span>
                          <span>{{ equData.yVibration }}</span>
                        </p>
                        <p>
                          <span>z轴振动：</span>
                          <span>{{ equData.zVibration }}</span>
                        </p>
                        <button
                          class="Parametebutton margin-tb-10"
                          @click="lookDetail(equData)"
                        >
                          设备详情
                        </button>
                        <!-- <button

                          class="margin-lr-10 margin-tb-10"
                          :class="SensorIndex == equData.macsn ? 'Parametebuttonactive' : 'Parametebutton'"
                          @click="lookSensor(options)"
                        >
                          传感器
                        </button> -->
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <div class="padding-tb-10 border-b">
                <a-row class="padding-tb-10">
                  <a-col :span="10">
                    <div class="runParameterTitle">机器人</div>
                  </a-col>
                  <a-col :span="14">
                    <div class="Sequence-oneRighttype" :style="{ color: robotstatus(ModbusInfo.platformState, 1) }">
                      <span>
                        <a-icon
                          class="icon"
                          :type="robotstatus(ModbusInfo.platformState, 2)"
                          theme="filled"
                          :style="{ color: robotstatus(ModbusInfo.platformState, 1) }"
                        />
                      </span>
                      {{ robotstatus(ModbusInfo.platformState, 3) }}
                    </div>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="10">
                    <img style="width: 100%; height: 168px" src="../../images/THING/index3.png" alt="" />
                  </a-col>
                  <a-col :span="14">
                    <div class="leftParamete padding-lr">
                      <p>
                        <span>通讯状态：</span>
                        <span :style="{ color: ModbusInfo.modbusState == 1 ? '#D65B4A' : '#2FB818' }">
                          {{ ModbusInfo.modbusState == 1 ? '异常' : ModbusInfo.modbusState == 0 ? '通畅' : '' }}
                        </span>
                      </p>
                      <p>
                        <span>J1：</span>
                        <span class="colorin">{{ ModbusInfo.j1 || 0 }}</span>
                      </p>
                      <p>
                        <span>J2：</span>
                        <span class="colorin">{{ ModbusInfo.j2 || 0 }}</span>
                      </p>

                      <p>
                        <span>J3：</span>
                        <span class="colorin">{{ ModbusInfo.j3 || 0 }}</span>
                      </p>

                      <p>
                        <span>J4：</span>
                        <span class="colorin">{{ ModbusInfo.j4 || 0 }}</span>
                      </p>
                      <p>
                        <span>J5：</span>
                        <span class="colorin">{{ ModbusInfo.j5 || 0 }}</span>
                      </p>
                      <p>
                        <span>J6：</span>
                        <span class="colorin">{{ ModbusInfo.j6 || 0 }}</span>
                      </p>
                    </div>
                  </a-col>
                </a-row>
              </div>
              <div class="padding-tb-10">
                <a-row class="padding-tb-10">
                  <a-col :span="10">
                    <div class="runParameterTitle">喷涂机器人</div>
                  </a-col>
                  <a-col :span="14">
                    <div class="Sequence-oneRighttype" :style="{ color: robotstatus(vinfo.states, 1) }">
                      <span>
                        <a-icon
                          class="icon"
                          :type="robotstatus(vinfo.states, 2)"
                          theme="filled"
                          :style="{ color: robotstatus(vinfo.states, 1) }"
                        />
                      </span>
                      {{ robotstatus(vinfo.states, 3) }}
                    </div>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="10">
                    <img style="width: 100%; height: 168px" src="../../images/THING/index2.png" alt="" />
                  </a-col>
                  <a-col :span="14">
                    <div class="leftParamete padding-lr">
                      <p>
                        <span>喷涂距离：</span>
                        <span class="colorin">
                         {{vinfo.sprayDistance}}
                        </span>
                      </p>
                      <a-row>
                        <a-col :span="12">
                          <p style="text-align:center">
                            <span class="colorin">机器人位置</span>
                          </p>
                          <p>
                            <span>X：</span>
                            <span class="colorin">{{ vinfo.xPos || 0 }}</span>
                          </p>

                          <p>
                            <span>Y：</span>
                            <span class="colorin">{{ vinfo.yPos || 0 }}</span>
                          </p>
                          <p>
                            <span>Z：</span>
                            <span class="colorin">{{ vinfo.zPos || 0 }}</span>
                          </p>
                        </a-col>
                        <a-col :span="12">
                          <p style="text-align:center">
                            <span class="colorin">机器人速度</span>
                          </p>
                          <p>
                            <span>X：</span>
                            <span class="colorin">{{ vinfo.xSpeed || 0 }}</span>
                          </p>

                          <p>
                            <span>Y：</span>
                            <span class="colorin">{{ vinfo.ySpeed || 0 }}</span>
                          </p>
                          <p>
                            <span>Z：</span>
                            <span class="colorin">{{ vinfo.zSpeed || 0 }}</span>
                          </p>
                        </a-col>
                      </a-row>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>

          <!-- <run-parameter @changeSensor="changeSensor" :List="equList"></run-parameter> -->
        </div>
      </a-col>
      <a-col class="gutter-row" :span="17">
        <!--      架构图-->
        <div class="gutter-box">
          <div class="bg padding-tb padding-lr">
            <div class="colorin indextitle">架构图</div>
            <div class="leftimg">
              <img src="../../images/THING/leftimg.png" alt="" />
            </div>
          </div>
          <div style="width: 100%" class="padding-tb">
            <a-row :gutter="20">
              <a-col :span="12">
                <div class="bg padding-tb padding-lr">
                  <div class="colorin indextitle">任务进度</div>
                  <div class="ParameterTask">
                    <div class="padding-tb-10">
                      <a-row>
                        <a-col :span="10">
                          <img style="width: 100%; height: 205px" src="../../images/THING/eq3.png" alt="" />
                        </a-col>
                        <a-col :span="14">
                          <div class="leftParamete padding-lr">
                            <p>
                              <span>当前模式：</span>
                              <span class="colorin">{{ ModbusInfo.manualOrVoluntarily ? '自动' : '手动' }}</span>
                            </p>
                            <p>
                              <span>传送带速度：</span>
                              <span class="colorin">{{ ModbusInfo.conveySpeed || 0 }}</span>
                            </p>

                            <p>
                              <span>平台振动：</span>
                              <span class="colorin">{{ ModbusInfo.platformVibration || 0 }}</span>
                            </p>
                          </div>
                        </a-col>
                      </a-row>
                    </div>
                    <!-- <div>
                      <p v-for="(item, i) in TaskList" :key="i">
                        <span>{{ item.name }}</span>
                        <a-progress :percent="parseInt(item.value * 100)" strokeColor="#2EA1F8" style="width: 60%" />
                      </p>
                    </div> -->
                  </div>
                </div>
              </a-col>
              <a-col :span="12">
                <div class="bg padding-tb padding-lr">
                  <div class="colorin indextitle">传感器</div>
                  <div style="width: 90%; margin: 2px auto">
                    <a-row :gutter="20" type="flex" class="padding-tb-10">
                      <a-col :flex="2">
                        <div class="sensorbox">
                          <div class="sensorIcon">
                            <img src="../../images/THING/eq4.png" alt="" />
                          </div>
                          <div>
                            <p class="Parameterdata">
                              {{ MacCurrent.macPower || '0' }}
                              <span>w</span>
                            </p>
                            <p class="ParameterTitle colorin">机床主轴功率</p>
                          </div>
                        </div>
                      </a-col>
                      <a-col :flex="2">
                        <div class="sensorbox">
                          <div class="sensorIcon">
                            <img src="../../images/THING/eq5.png" alt="" />
                          </div>
                          <div>
                            <p class="Parameterdata">
                              {{ MacCurrent.temperature || '0' }}
                              <span>℃</span>
                            </p>
                            <p class="ParameterTitle colorin">机床温度</p>
                          </div>
                        </div>
                      </a-col>
                    </a-row>
                    <a-row :gutter="20" type="flex" class="padding-tb-10">
                      <a-col :flex="2">
                        <div class="sensorbox">
                          <div class="sensorIcon">
                            <img src="../../images/THING/eq5.png" alt="" />
                          </div>
                          <div>
                            <p class="Parameterdata" style="color: #ff2424">
                              0
                              <!-- {{MacCurrent.spdlPower||"0"}} -->
                              <span>mm/s</span>
                            </p>
                            <p class="ParameterTitle colorin">装配平台传动带速度</p>
                          </div>
                        </div>
                      </a-col>
                      <a-col :flex="2">
                        <div class="sensorbox">
                          <div class="sensorIcon">
                            <img src="../../images/THING/eq5.png" alt="" />
                          </div>
                          <div>
                            <p class="Parameterdata" style="color: #ff2424">
                              0
                              <!-- {{MacCurrent.spdlSpeed||"0"}} -->
                              <span>mm</span>
                            </p>
                            <p class="ParameterTitle colorin">装配平台振动</p>
                          </div>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
        <!--        <div>-->
        <!--          -->
        <!--        </div>-->
      </a-col>
    </a-row>
  </div>
</template>

<script>
let thecolor = [
  { icon: 'check-circle', color: '#2FB818', name: '运行', value: 1000 },
  { icon: 'exclamation-circle', color: '#D65B4A', name: '报警', value: 2000 },
  { icon: 'minus-circle', color: '#FBC225', name: '待机', value: 3000 },
  { icon: 'close-circle', color: '#68768C', name: '离线', value: 4000 },
  { icon: 'close-circle', color: '#68768C', name: '离线', value: '' },
];

let robotcolor = [
  { icon: 'check-circle', color: '#D65B4A', name: '急停', value: 10000 },
  { icon: 'exclamation-circle', color: '#D65B4A', name: '系统暂停', value: 10001 },
  { icon: 'minus-circle', color: '#D65B4A', name: '系统停止', value: 10002 },
  { icon: 'exclamation-circle', color: '#2FB818', name: '系统运行', value: 10003 },
  { icon: 'exclamation-circle', color: '#FBC225', name: '系统备妥', value: 10004 },
  { icon: 'exclamation-circle', color: '#D65B4A', name: '机器人错误', value: 10005 },
  { icon: 'exclamation-circle', color: '#D65B4A', name: '', value: 10006 },
];
// import runParameter from './component/runParameter';
import api from '@/api/equipment';
var timer = null;
export default {
  name: 'index',
  components: {
    // runParameter,
  },
  data() {
    return {
      equList: [],
      TaskList: [],
      MacCurrent: {},
      ModbusInfo: {
        joint: [0, 0, 0, 0, 0, 0], //数组 机床坐标
      },
      vinfo:{},
      equData: {},
      thecolor: thecolor,
      robotcolor: robotcolor,
      runstate: 1000,
      SensorIndex: 449,
      imgurl: '',
      defultimg: require('@images/THING/eq1.png'),
      // list:list
      onerrorimg: 'this.src="' + require('@images/THING/eq1.png') + '"',
    };
  },
  created() {
    this.imgurl = this.$pictureUrl;
    // localStorage.setItem('userName', 'guest');
    localStorage.setItem('compid', 3);
    localStorage.setItem('choseCompanyId', 3);
    this.$store.commit('board/HeadNavType', 3);
    this.getEquGroup();
    // this.getLineTask();
    this.getVirtualModbusInfo()
    this.getModbusInfo();
  },
  mounted() {
    // clearInterval(timer);
    // timer = setInterval(() => {
    //   this.getEquGroup();
    //   this.getVirtualModbusInfo();
    //   this.getModbusInfo();
    // }, 20000);
  },
  beforeDestroy() {
    clearInterval(timer);
  },
  methods: {
    getVirtualModbusInfo(){
        api.getVirtualModbusInfo().then((res) => {
        if (res.MsgCode == 0) {
          this.vinfo = res.Data;
        }
      });
    },
    getMacCurrent(macSn) {
      api.getMacCurrent({ companyId: 3, macSn: macSn }).then((res) => {
        if (res.MsgCode == 0) {
          this.MacCurrent = res.Data;
        }
      });
    },
    getLineTask() {
      api.getLineTaskList({ companyId: 3 }).then((res) => {
        this.TaskList = res.Data;
      });
    },
    getEquGroup() {
      let params = {
        Username: 'guest',
        compid: 3,
      };
      api.CompanyGroupList(params).then((res) => {
        this.equList = res.Data;
        this.equData = this.equList[0].MacSNs[0];
        if (!localStorage.getItem('macsn')) {
          localStorage.setItem('macsn', this.equList[0].MacSNs[0].macsn);
          localStorage.setItem('groupid', this.equList[0].groupid);
          this.getMacCurrent(this.equList[0].MacSNs[0].macsn);
        } else {
          this.getMacCurrent(localStorage.getItem('macsn'));
        }
      });
    },
    getModbusInfo() {
      api.getModbusInfo().then((res) => {
        this.ModbusInfo = res.Data;
        if (!this.ModbusInfo.joint) {
          this.ModbusInfo.joint = [0, 0, 0, 0, 0, 0];
        }
      });
    },
    changeSensor(macsn) {
      console.log(macsn);
      this.getMacCurrent(macsn);
    },
    lookSensor(opt, groupid) {
      this.$store.commit('board/HeadNavType', 4);
      this.$router.push('/dataMonitor');
    },
    lookDetail(item) {
      this.$store.commit('board/DetailType', 5);
      localStorage.setItem('DetailType', 5);
      localStorage.setItem('macsn', item.macsn);
      let routeData = this.$router.resolve({
        path: '/deviceinfo',
        query: { macsn: item.macsn, groupid: localStorage.getItem('groupid') },
      });
      window.open(routeData.href, '_blank');
    },
    runStateOptioncolor(val, type) {
      let opt = thecolor.find((item) => item.value == val);
      if (type == 1) {
        return opt ? opt.color : '';
      } else if (type == 2) {
        return opt ? opt.icon : '';
      } else if (type == 3) {
        return opt ? opt.name : '';
      }
    },

    robotstatus(val, type) {
      let opt = robotcolor.find((item) => item.value == val);
      if (type == 1) {
        return opt ? opt.color : '';
      } else if (type == 2) {
        return opt ? opt.icon : '';
      } else if (type == 3) {
        return opt ? opt.name : '';
      }
    },
  },
};
</script>

<style scoped lang="less">
@import './index.less';
</style>
